﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="SoundBox.aspx.cs" Inherits="Demos_SoundBox" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .block
        {
            width: 50px;
            height: 50px;
            line-height:50px;
            background-color: #01439c;
            margin: 200px 0 0 50px;
            float: left;
            cursor: pointer;
            text-align:center;
            font-size:24px; font-weight:bold; color:#fff;
        }
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
    <script src="../Scripts/rx.js"></script>
    <script src="../Scripts/rx.time.js"></script>
    <script src="../Scripts/rx.jquery.js"></script>
    <script type="text/javascript">
        var colors = { red: "#e47070", orange: "#ff852c", yellow: "#ffe401", green: "#8ccd79", cyan: "#3de8de", blue: "#01439c", purple: "#bb6bca" }
        $(document).ready(function () {

            $(".block").each(function (key, value) { 
                switch($(this).attr("title"))
                {
                    case 'Sound_1':
                        $(this).css({"background-color":colors.red});
                        break;
                    case 'Sound_2':
                        $(this).css({"background-color":colors.orange});
                        break;
                    case 'Sound_3':
                        $(this).css({"background-color":colors.yellow});
                        break;
                    case 'Sound_4':
                        $(this).css({"background-color":colors.green});
                        break;
                    case 'Sound_5':
                        $(this).css({"background-color":colors.cyan});
                        break;
                    case 'Sound_6':
                        $(this).css({"background-color":colors.blue});
                        break;
                    case 'Sound_7':
                        $(this).css({"background-color":colors.purple});
                        break;
                    default:
                }
            });



            //RxJS
            var block = $(".block");
            var mouseMove1 = block.mouseoverAsObservable("mouseover");
            mouseMove1.subscribe(function (ev) {
                $("#mysound").append($("<embed src=\"sounds/" + $(ev.currentTarget).attr("title") + ".mp3\" type=\"audio/mpeg\" loop=\"false\" autostart=\"true\" hidden=\"true\">"));
                $(ev.currentTarget).effect('shake', { times: 3,distance:10 }, 100);
        });
        });

    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div class="block" title="Sound_1">
            Do
        </div>
        <div class="block" title="Sound_2">
            Re
        </div>
        <div class="block" title="Sound_3">
            Mi
        </div>
        <div class="block" title="Sound_4">
            Fa
        </div>
        <div class="block" title="Sound_5">
            So
        </div>
        <div class="block" title="Sound_6">
            La
        </div>
        <div class="block" title="Sound_7">
            Ti
        </div>
        <div id="mysound"></div>
    </form>
</body>
</html>
